<script setup lang='ts'>

interface Menu {
  id: number,
  icon: string,
  name: string,
}

const menus: Menu[] = [
  { id: 1, icon: '&#xe60a;', name: '功能A' },
  { id: 2, icon: '&#xe60a;', name: '功能B' },
  { id: 3, icon: '&#xe60a;', name: '功能C' },
  { id: 4, icon: '&#xe60a;', name: '功能D' },
  { id: 5, icon: '&#xe60a;', name: '功能E' },
]

// No rush to abstract
interface Nav {
  id: number,
  icon: string,
  name: string,
}

const navs: Nav[] = [
  { id: 1, icon: '&#xe60a;', name: '首页' },
  { id: 2, icon: '&#xe60a;', name: '主数据' },
  { id: 3, icon: '&#xe60a;', name: '辖区管理' },
]
</script>

<template>
  <div class='dashboard'>
    <div class='lead'>
      <div class='logo'>
        <div class='internal-logo' />
      </div>
      <div class='menu'>
        <div class='menu-item' v-for='menu in menus' v-key='menu.id'>
          <!-- Pay attention to check whether the string menu.icon conforms to the rules -->
          <div class='menu-icon iconfont' v-html='menu.icon' />
          <div class='menu-name'>{{ menu.name }}</div>
          <div class='menu-arrow iconfont'>&#xe600;</div>
        </div>
      </div>
    </div>
    <div class='body'>
      <div class='head'>
        <div class='nav'>
          <div class='nav-item' v-for='nav in navs' v-key='nav.id'>
            <div class='nav-icon iconfont' v-html='nav.icon' />
            <div class='nav-name'>{{ nav.name }}</div>
          </div>
        </div>
        <div class='p2ps-logo'>
          <div class='internal-p2ps-logo' />
        </div>
      </div>
      <div class='main'>
        <router-view />
      </div>
    </div>
  </div>
</template>

<style scoped>
/*
 The CDN service is only for platform experience and debugging.
 The platform does not promise the stability of the service.
 Enterprise customers need to download the font package to release and use it by themselves and make a backup.
*/
@font-face {
  font-family: 'iconfont';  /* Project id 3899448 */
  src:
       url('//at.alicdn.com/t/c/font_3899448_wjyafbrkqb.woff2?t=1676531062994') format('woff2'),
       url('//at.alicdn.com/t/c/font_3899448_wjyafbrkqb.woff?t=1676531062994') format('woff'),
       url('//at.alicdn.com/t/c/font_3899448_wjyafbrkqb.ttf?t=1676531062994') format('truetype');
}
.iconfont{
  font-family: 'iconfont' !important;
  font-size: 16px; font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.dashboard {
  display: grid;
  grid-template:
    'lead body' 100% / 160px auto
  ;
  width: 100vw;
  height: 100vh;
}

.dashboard .lead {
  display: grid;
  grid-template:
    'logo' 60px
    'menu' calc(100% - 60px) / auto
  ;
  gap: 10px 0;
  padding: 10px;
  background: #212121;
}

.dashboard .lead .logo {
  contain: strict;
}

.dashboard .lead .logo .internal-logo {
  background: transparent url(//jooyum.com/img/logo.f8bb38c2.svg) no-repeat 0 0;
  width: 147px;
  height: 100%;
}

.dashboard .lead .menu .menu-item {
  display: grid;
  grid-template:
    'icon name arrow' auto / 24px auto 24px
  ;
  padding: 5px;
  border-radius: 0 20px 5px 5px;
  transition: .25s ease-out;
}

.dashboard .lead .menu .menu-item .menu-icon,
.dashboard .lead .menu .menu-item .menu-name,
.dashboard .lead .menu .menu-item .menu-arrow {
  display: flex;
  place-items: center;
  place-content: center;
}
.dashboard .lead .menu .menu-item .menu-name {
  place-content: start;
  color: #bababa;
}

.dashboard .lead .menu .menu-item:hover {
  background: #393939;
}

.dashboard .body {
  display: grid;
  grid-template:
    'head' 80px
    'main' calc(100% - 80px) / auto
  ;
}

.dashboard .body .head {
  display: flex;
  place-items: center;
  gap: 0 20px;

  background: #212121;

  padding-left: 10px;
}

.dashboard .body .head .nav {
  display: flex;
  place-items: center;
  gap: 0 20px;
}

.dashboard .body .head .nav .nav-item {
  display: grid;
  grid-template:
    'icon name' auto / 40px auto
  ;
  place-items: center;
  gap: 0 3px;
}

.dashboard .body .head .nav .nav-icon {
  display: flex;
  place-items: center;
  place-content: center;

  width: 35px;
  height: 35px;

  border-radius: 10px;
  background: #404040;
}

.dashboard .body .head .nav .nav-name {
  color: #bababa;
}

.dashboard .body .head .p2ps-logo .internal-p2ps-logo {
  background: transparent url(//jooyum.com/img/logo.f8bb38c2.svg) no-repeat -158px 0;
  width: 147px;
  height: 60px;
}

.dashboard .body .main {
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
